<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>

    .box {
        /* input为行内块元素, 可以使用text-align:center实现水平居中 */
        text-align: center;
        margin: 100px;
    }

</style>
<body>

<div class="box">
    <label for="in">
        <!--<input id="in" onblur="inputBlur()" onfocus="inputFocus()" type="text" value="手机">-->
        <input id="in" onblur="inputBlur()" onfocus="inputFocus()" type="text" value="手机">
        <button>搜索</button>
    </label>
</div>


<script>
    const text = document.querySelector('#in');

    /**
     * onBlur 失去焦点
     * 如果失去焦点, 判断表单内容是否为空.
     *      如果为空, 则表单内容改为默认文字
     */
    function inputBlur() {
        // console.log('失去了焦点')
        if (text.value === '') {
            text.value = '手机';
        }
        // 失去焦点需要把文本框里面的文字颜色变浅色
        text.style.color = '#999';
    }

    /**
     * onFocus 获取焦点
     * #
     * 如果获取到焦点, 判断表单里面内容是否默认文字
     *      如果是默认文字, 就清空表单内容
     */
    function inputFocus() {
        // console.log('得到了焦点')
        if (text.value === '手机') {
            text.value = '';
        }
        // 获取焦点需要把文本框里面的文字颜色变黑
        text.style.color = 'black';

    }
</script>
</body>
</html>
